<script lang="ts" setup>
import Episode from './Episode.vue'
import type {IChapter} from '@/typings/interface'

const {expand: _expand} = defineProps<{
    play?: boolean
    index: number
    expand: boolean
    chapter: IChapter
}>()

const expand = $ref(_expand)
</script>

<template>
    <view class="mb-3.75">
        <view wfull bg="#D7D7D7 opacity-10">
            <view text="22 #333333" class="b b-#d7d7d7 b-opacity-35 px-2.5 py-1" between @click="expand = !expand">
                <text truncate>
                    第 {{ index + 1 }} 章 - {{ chapter.title }}
                </text>
                <image
                        class="w-20 h-12"
                        src="@/static/images/icons/video/detail/arrow_up.svg"
                        :style="{ transform: `rotate(${expand ? '0' : '180deg'})` }"
                />
            </view>
            <view v-show="expand" bg-white class="b-b b-l b-r b-#d7d7d7 b-opacity-35" p="y-2.2 x-6">
                <Episode
                        v-for="(episode, idx) in chapter.episodeList"
                        :key="episode.id"
                        :play="play"
                        :episode="episode"
                        :chapter="chapter"
                        class="last-mb-0 mb-2"
                        :index="idx"
                />
            </view>
        </view>
    </view>
</template>
